<template>
<div>
  <div class="prompter-view" :style="{'width': `${config.weight}px`, 'height': `${config.height}px`, 'font-size': `${config.fontSize}px`}">
    <div class="prompter-text" :style="{'width': `${config.weight}px`, 'transform': `translateY(-${posY}px)`}">{{text}}</div>
  </div>
</div>
</template>

<script>
export default {
  name: "Client",
  data() {
    return {
      config: {
        weight: 1000,
        height: 400,
        fontSize: 100
      },
      text: '',
      ws: null,
      posY: 0
    }
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:12300')
    this.ws.onopen = () => {
      let json = {type: 'handshake', data: {model: 'client'}}
      this.ws.send(JSON.stringify(json))
      this.getScreen()
    }
    this.ws.onmessage = e => {
      console.log(e)
      let json = JSON.parse(e.data)
      if (json.type === 'config') {
        this.config = json.data
      }else if (json.type === 'text') {
        this.text = json.data
      }else if (json.type === 'position') {
        this.posY = json.data
      }else if (json.type === 'getScreen') {
        this.getScreen()
      }
    }

    window.onresize = () => {
      this.getScreen()
    }
  },
  methods: {
    getScreen() {
      let json = {
        type: 'responseSize',
        data: {
          width: window.innerWidth,
          height: window.innerHeight
        }
      }
      this.ws.send(JSON.stringify(json))
    }
  }
}
</script>

<style scoped>

.prompter-view {
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
  transform: rotateY(180deg);
}

.prompter-text {
  overflow: auto;
  word-wrap: anywhere;
}
</style>